<template>

  <div class="footer">
    <!--各类应用链接-->
    <div class="link">
      <div class="item">
        <div class="circle">
          <i class="iconfont icon-weibo"></i>
        </div>
        <div class="name">微博</div>
      </div>

      <div class="item">
        <div class="circle">
          <i class="iconfont icon-xiaochengxu"></i>
        </div>
        <div class="name">小程序</div>
      </div>

      <div class="item">
        <div class="circle">
          <i class="iconfont icon-gongzhonghao1"></i>
        </div>
        <div class="name">公众号</div>
      </div>

      <div class="item">
        <div class="circle">
          <i class="iconfont icon-douyin"></i>
        </div>
        <div class="name">抖音</div>
      </div>

      <div class="item">
        <div class="circle">
          <i class="iconfont icon-kuaishou"></i>
        </div>
        <div class="name">快手</div>
      </div>

    </div>

    <!--  相关情况:相关链接 隐私政策 版权声明 留言板 联系我们 关于我们-->
    <div class="copyright">
      <p>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">联系我们</a>
        <a href="javascript:;">留言板</a>
        <a href="javascript:;">版权声明</a>
        <a href="javascript:;">商务合作</a>
        <a href="javascript:;">隐私政策</a>
        <a href="javascript:;">友情链接</a>
      </p>
      <p>CopyRight © 宁夏工艺美术博物馆</p>
    </div>
  </div>
<!--  Scroll down to see the bottom-right button.-->
<!--  <el-backtop :bottom="100">-->
<!--    <div-->
<!--        style="-->
<!--        height: 100%;-->
<!--        width: 100%;-->
<!--        background-color: var(&#45;&#45;el-bg-color-overlay);-->
<!--        box-shadow: var(&#45;&#45;el-box-shadow-lighter);-->
<!--        text-align: center;-->
<!--        line-height: 40px;-->
<!--        color: #1989fa;-->
<!--      "-->
<!--    >-->
<!--     up-->
<!--    </div>-->
<!--  </el-backtop>-->
  <el-backtop :right="100" :bottom="100" />
</template>

<script>
export default {
  name: "Footer"
}
</script>

<style scoped lang='less'>

.footer{
  background-color: #333;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  //margin:5px;
  .link{
    width: 60%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:5px;
    .item{
      .circle{
        background-color: #474747;
        width: 60px;
        height: 60px;
        border-radius: 30px;
        i{
          font-size: 30px;
          line-height: 60px;
          color: #fff;
        }
      }
      .circle:hover{
        background-color: deepskyblue;
      }
      .name{
        color:#474747;
      }

    }

  }
  .copyright{
    height: 170px;
    padding-top: 40px;
    text-align: center;
    color: #999;
    font-size: 15px;
    p {
      line-height: 1;
      margin-bottom: 20px;
    }
    a {
      color: #999;
      line-height: 1;
      padding: 0 10px;
      border-right: 1px solid #999;
      &:last-child {
        border-right: none;
      }
    }
  }
}
</style>